<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../lib2/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib2//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
        class A extends React.Component{
            shouldComponentUpdate(nextProps,nextState){
                console.log(this.state.name,nextState.name)
                return !(this.state.name==nextState.name)
            }
            state={
                name:'小张'
            }
            updata=()=>{
                const {name}=this.state
                    this.setState({name:'小李'})
            }
        render(){
            console.log('a组件render了一次')
            return <div>
                <button onClick={this.updata}>点我更新数据</button>
                <h3>使用Component继承的缺陷:无论state里面的值是否变化,只要调了setState多会执行render,
                    以及他的子组件的render</h3>
                    <h2>使用pureComponent时要注意:放在里面的值必须是一个新对象,即不能先修改在更新,需要直接在setstate里面修改</h2>
                <h2>{this.state.name}</h2>
                <B name={this.state.name}/>
                </div>
        }
        }
        class B extends React.PureComponent{
            render(){
                console.log('我是b组件，我被render了一次').
                return <div>
                    <h2>我是B组件</h2>
                    <h2>我接受到父亲的值是:{this.props.name}</h2>
                    </div>
            }
        }
        ReactDOM.render(<A/>,document.getElementById('test'))
        </script>
</body>
</html>